<!-- 
由于日常联系中专项联系、和 精选题练习不要故备份
 -->
<template>
	<view style="padding-bottom: 50rpx;">
		<page-head :title="'驾考宝典'" :headtype="2"></page-head>
		<view class="topsticky" :style="'top:'+statusheadheight+'px'">
			<view class="tagcart flex marginAuto">
				<view class="tagcarteach" @click="cartfun(1)">
					<view class="tagcartimage marginAuto">
						<image class="tagcartiicon" v-if="cartype != 1" :src="apifun.serveimg+'dircar1.png'" mode="widthFix"></image>
						<image class="tagcartiicon" v-if="cartype == 1" :src="apifun.serveimg+'dircar1ac.png'" mode="widthFix"></image>
					</view>
					<view class="tagcarttitle" :class="cartype == 1 ? 'tagcarttitleac':''">C1/C2/C3</view>
				</view>
				<view class="tagcarteach" @click="cartfun(2)">
					<view class="tagcartimage marginAuto">
						<image class="tagcartiicon" v-if="cartype != 2" :src="apifun.serveimg+'dircar2.png'" mode="widthFix"></image>
						<image class="tagcartiicon" v-if="cartype == 2" :src="apifun.serveimg+'dircar2ac.png'" mode="widthFix"></image>
					</view>
					<view class="tagcarttitle" :class="cartype == 2 ? 'tagcarttitleac':''">A1/A2/A3</view>
				</view>
				<view class="tagcarteach" @click="cartfun(3)">
					<view class="tagcartimage marginAuto">
						<image class="tagcartiicon" v-if="cartype != 3" :src="apifun.serveimg+'dircar3.png'" mode="widthFix"></image>
						<image class="tagcartiicon" v-if="cartype == 3" :src="apifun.serveimg+'dircar3ac.png'" mode="widthFix"></image>
					</view>
					<view class="tagcarttitle" :class="cartype == 3 ? 'tagcarttitleac':''">D/E/F</view>
				</view>
				<view class="tagcarteach" @click="cartfun(4)">
					<view class="tagcartimage marginAuto">
						<image class="tagcartiicon" v-if="cartype != 4" :src="apifun.serveimg+'dircar4.png'" mode="widthFix"></image>
						<image class="tagcartiicon" v-if="cartype == 4" :src="apifun.serveimg+'dircar4ac.png'" mode="widthFix"></image>
					</view>
					<view class="tagcarttitle" :class="cartype == 4 ? 'tagcarttitleac':''">A2/B2</view>
				</view>
				<view class="tagcarteach" @click="cartfun(5)">
					<view class="tagcartimage marginAuto">
						<image class="tagcartiicon" v-if="cartype != 5" :src="apifun.serveimg+'dircar5.png'" mode="widthFix"></image>
						<image class="tagcartiicon" v-if="cartype == 5" :src="apifun.serveimg+'dircar5ac.png'" mode="widthFix"></image>
					</view>
					<view class="tagcarttitle" :class="cartype == 5 ? 'tagcarttitleac':''">C6</view>
				</view>
			</view>
			<view class="subject flex">
				<view class="subjecteach" :class="subject == 1 ? 'acsubject':''" @click="subjectfun(1)">
					<view class="subjecteachtxt">科一</view>
					<uv-icon style="margin-left:50rpx;margin-top:5rpx;" name="arrow-up-fill" size="20" :color="subject == 1 ? '#1686F8':'#ffffff'"></uv-icon>
				</view>
				<view class="subjecteach" :class="subject == 2 ? 'acsubject':''" @click="subjectfun(2)">
					<view class="subjecteachtxt">科二</view>
					<uv-icon style="margin-left:50rpx;margin-top:5rpx;" name="arrow-up-fill" size="20" :color="subject == 2 ? '#1686F8':'#ffffff'">></uv-icon>
				</view>
				<view class="subjecteach" :class="subject == 3 ? 'acsubject':''" @click="subjectfun(3)">
					<view class="subjecteachtxt">科三</view>
					<uv-icon style="margin-left:50rpx;margin-top:5rpx;" name="arrow-up-fill" size="20" :color="subject == 3 ? '#1686F8':'#ffffff'">></uv-icon>
				</view>
				<view class="subjecteach" :class="subject == 4 ? 'acsubject':''" @click="subjectfun(4)">
					<view class="subjecteachtxt">科四</view>
					<uv-icon style="margin-left:50rpx;margin-top:5rpx;" name="arrow-up-fill" size="20" :color="subject == 4 ? '#1686F8':'#ffffff'">></uv-icon>
				</view>
			</view>
		</view>
		<view class="grade marginAuto" v-if="subject == 1 || subject == 4">
			<view class="gradet flex marginAuto">
				<view class="gradeteach">
					<view class="gradeteachfen">99<text style="font-size:24rpx;">分</text> </view>
					<view class="gradeteachtitle">最高分</view>
				</view>
				<view class="gradeteach">
					<view class="gradeteachfen">99<text style="font-size:24rpx;">分</text> </view>
					<view class="gradeteachtitle">平均成绩</view>
				</view>
				<view class="gradeteach">
					<view class="gradeteachfen">99<text style="font-size:24rpx;">%</text> </view>
					<view class="gradeteachtitle">通过率</view>
				</view>
			</view>
			<view class="gradeb flex marginAuto">
				<view class="gradebeach mainBg baiColor" @click="apifun.navigate('/pages/driving/examinationmn')">开始模拟考试</view>
				<view class="gradebeach mainColor" @click="apifun.navigate('/pages/driving/historycj')">查看历史成绩</view>
			</view>
		</view>
		<view class="navtype flex marginAuto">
			<view class="navtypeeach" @click="apifun.navigate('/pages/driving/rule')">
				<view class="navtypeeachimg marginAuto">
					<image :src="apifun.serveimg+'diricon1.png'" mode=""></image>
				</view>
				<view class="navtypeeachtxt">考试规则</view>
			</view>
			<view class="navtypeeach" @click="apifun.navigate('/pages/driving/flow')">
				<view class="navtypeeachimg marginAuto">
					<image :src="apifun.serveimg+'diricon2.png'" mode=""></image>
				</view>
				<view class="navtypeeachtxt">考试流程</view>
			</view>
			<view class="navtypeeach" @click="apifun.navigate('/pages/driving/standard')">
				<view class="navtypeeachimg marginAuto">
					<image :src="apifun.serveimg+'diricon3.png'" mode=""></image>
				</view>
				<view class="navtypeeachtxt">考试标准</view>
			</view>
			<view class="navtypeeach" @click="apifun.navigate('/pages/driving/gist')">
				<view class="navtypeeachimg marginAuto">
					<image :src="apifun.serveimg+'diricon4.png'" mode=""></image>
				</view>
				<view class="navtypeeachtxt">考试要点</view>
			</view>
		</view>
		<view class="conn" v-if="subject == 1 || subject == 4">
			<view class="connname marginAuto">日常联系</view>
			<view class="connmain marginAuto flex">
				<view class="connmzxlx" @click="apifun.navigate('/pages/driving/profession')">
					<image class="connmzxlxrb" :src="apifun.serveimg+'diricon5.png'" mode=""></image>
					<view class="connmzxlx-title">专项练习</view>
					<view class="connmzxlx-doc">精准突破</view>
				</view>
				<view class="connmeach">
					<view class="conncard">
						<image class="conncardbg" :src="apifun.serveimg+'diriconcardbg1.png'" mode=""></image>
						<view class="conncardtitle">顺序练习</view>
						<view class="conncardnum">
							<text style="color:#333333;font-size:36rpx;">6</text>
							<text style="color:#666666;font-size:28rpx;">/2259</text>
						</view>
					</view>
					<view class="conncard" style="margin-top: 20rpx;">
						<image class="conncardbg" :src="apifun.serveimg+'diriconcardbg2.png'" mode=""></image>
						<view class="conncardtitle">错题练习</view>
						<view class="conncardnum">
							<text style="color:#333333;font-size:36rpx;">6</text>
							<text style="color:#666666;font-size:28rpx;">/2259</text>
						</view>
					</view>
				</view>
				<view class="connmeach">
					<!-- <view class="conncard">
						<image class="conncardbg" :src="apifun.serveimg+'diriconcardbg2.png'" mode=""></image>
						<view class="conncardtitle">精选题练习</view>
						<view class="conncardnum">
							<text style="color:#333333;font-size:36rpx;">6</text>
							<text style="color:#666666;font-size:28rpx;">/2259</text>
						</view>
					</view> -->
					<view class="conncard" style="margin-top: 20rpx;">
						<image class="conncardbg" :src="apifun.serveimg+'diriconcardbg1.png'" mode=""></image>
						<view class="conncardtitle">收藏题练习</view>
						<view class="conncardnum">
							<text style="color:#333333;font-size:36rpx;">6</text>
							<text style="color:#666666;font-size:28rpx;">/2259</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="explain">
			<view class="explainhead marginAuto flex" @click="apifun.navigate('/pages/driving/explainlist')">
				<view class="explainheadname">视频讲解难点</view>
				<view class="explainheadall flex">
					<text>更多</text>
					<uv-icon name="arrow-right" size="14" color="#666666"></uv-icon>
				</view>
			</view>
			<view class="explainlist">
				<view class="explainitem flex marginAuto" 
				v-for="(item,index) in explaindata" :key="index"
				@click="apifun.navigate('/pages/driving/explainxq','id=1')">
					<view class="explainitemimg">
						<image :src="apifun.serveimg+'hgoods.png'" mode=""></image>
					</view>
					<view class="explainitemmsg">
						<view class="explainitemmsg-name ellipsis01">驾驶证的申领和限制条件</view>
						<view class="explainitemmsg-time">3分6秒</view>
						<!-- <view class="explainitemmsg-status" style="background: #FFEDED;color:#FC2A2A;">已学习</view> -->
						<view class="explainitemmsg-status" style="background:#DBEBFF;color:#0089FB;">已学习</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusheadheight: uni.getStorageSync('ClientRectTop') + uni.getStorageSync('ClientRectHeight'),
				apifun:this.apifun,
				cartype:1,
				subject:1,
				explaindata:[{},{},{},{}]
			};
		},
		onLoad() {
			
		},
		methods: {
			cartfun(type){  // 车类型
				this.cartype = type;
			},
			subjectfun(type){  // 科目
				this.subject = type;
			}
		},
	};
</script>

<style scoped lang="scss">
	.topsticky{
		position: sticky;
		width: 100%;
		z-index: 100;
		background: #fff;
	}
	// 车类型
	.tagcart{
		width:96%;
		padding:20rpx 2%;
		background:#fff;
		justify-content: space-between;
		.tagcarteach{
			width:20%;
			.tagcartimage{
				width: 60rpx;
				height: 60rpx;
				.tagcartiicon{
					width:100%;
					height:100%;
				}
			}
			.tagcarttitle{
				text-align: center;
				font-size: 20rpx;
				color:#666666;
				line-height: 50rpx;
			}
			.tagcarttitleac{
				color:#0661FF;
				font-weight: 600;
			}
		}
	}
	// 科目
	.subject{
		width: 90%;
		padding: 10rpx 5% 60rpx;
		justify-content:space-between;
		background:#fff;
		.subjecteach{
			width:150rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border: 1px solid #1686F8;
			border-radius:100rpx;
			.subjecteachtxt{
				color: #1686F8;
				font-size:30rpx;
			}
		}
		.acsubject{
			background:linear-gradient(to bottom,#5694FF,#0661FF);
			.subjecteachtxt{
				color: #ffffff;
			}
		}
	}
	// 成绩
	.grade{
		width: 690rpx;
		background: #fff;
		padding: 30rpx 0;
		margin: 20rpx auto;
		border-radius: 20rpx;
		.gradet{
			width: 100%;
			justify-content: space-around;
			.gradeteach{
				width: 30%;
				.gradeteachfen{
					font-size:40rpx;
					color:#222222;
					line-height:70rpx;
					text-align: center;
				}
				.gradeteachtitle{
					font-size: 24rpx;
					color:#333333;
					text-align: center;
				}
			}
		}
		.gradeb{
			width: 80%;
			padding-top: 40rpx;
			display: flex;
			justify-content: space-between;
			.gradebeach{
				width: 260rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 100rpx;
				text-align: center;
				font-size:30rpx;
				border: 1px solid #1686F8;
			}
		}
	}
	// 考试注意事项
	.navtype{
		width: 690rpx;
		padding:25rpx 0;
		background: #fff;
		border-radius: 20rpx;
		justify-content: space-between;
		margin-top: 20rpx;
		.navtypeeach{
			width: 25%;
			.navtypeeachimg{
				width: 90rpx;
				height: 90rpx;
				margin: 10rpx auto;
				image{
					width: 90rpx;
					height: 90rpx;
				}
			}
			.navtypeeachtxt{
				color: #222222;
				font-size: 30rpx;
				line-height:50rpx;
				text-align: center;
			}
		}
	}
	// 日常联系
	.conn{
		.connname{
			width: 690rpx;
			padding: 30rpx 0 20rpx;
			font-size: 34rpx;
			color: #222222;
			font-weight: 700;
		}
		.connmain{
			width: 690rpx;
			justify-content: space-between;
			.connmeach{
				width: 210rpx;
				.conncard{
					position: relative;
					width: 210rpx;
					height:120rpx;
					.conncardbg{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 0;
						width: 210rpx;
						height:120rpx;
					}
					.conncardtitle{
						position: relative;
						z-index: 10;
						font-size: 28rpx;
						color: #666666;
						padding-left: 20rpx;
						padding-top: 20rpx;
					}
					.conncardnum{
						position: relative;
						z-index: 10;
						padding-left: 20rpx;
					}
				}
			}
			.connmzxlx{
				position: relative;
				width: 230rpx;
				height: 260rpx;
				border-radius: 10rpx;
				background: linear-gradient(to bottom, #FFEBDC,#FFFFFF);
				.connmzxlxrb{
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					width: 110rpx;
					height: 110rpx;
				}
				.connmzxlx-title{
					font-size: 30rpx;
					color: #703205;
					padding: 18rpx 0 10rpx 18rpx;
				}
				.connmzxlx-doc{
					color: #666666;
					font-size: 24rpx;
					padding-left: 18rpx;
				}
			}
		}
	}
	// 视频讲解
	.explain{
		.explainhead{
			width: 690rpx;
			padding: 20rpx 0;
			line-height: 50rpx;
			justify-content: space-between;
			.explainheadname{
				color: #222222;
				font-size: 34rpx;
				font-weight: 700;
			}
			.explainheadall{
				color: #666666;
				font-size: 24rpx;
			}
		}
		.explainlist{
			.explainitem{
				width: 670rpx;
				padding: 10rpx;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.explainitemimg{
					width: 230rpx;
					height: 180rpx;
					image{
						width: 230rpx;
						height: 180rpx;
						border-radius: 10rpx;
					}
				}
				.explainitemmsg{
					width: 70%;
					margin-left: 18rpx;
					.explainitemmsg-name{
						color: #222222;
						font-size: 28rpx;
						margin-top: 10rpx;
					}
					.explainitemmsg-time{
						font-size: 24rpx;
						color: #666666;
						padding: 18rpx 0;
					}
					.explainitemmsg-status{
						display: inline-block;
						padding: 10rpx;
						border-radius: 10rpx;
						font-size:24rpx;
					}
				}
			}
		}
	}
</style>